<template>
  <el-container class="qqq">
    <el-header
      class="site-header"
      height="auto"
    >
      <div class="header-top">
        <nav class="bs-navbar">
          <el-link>首页</el-link>
          <el-link>博客</el-link>
          <el-link>关于</el-link>
        </nav>
        <h1>ＱＱ等级查询 - 等级成长值查询</h1>
        <p>查询qq当前成长值</p>
      </div>
      <div class="package-info">
        <ul>
          <li @click="routerPush('DocApi')">
            API文档
          </li>
          <li @click="routerPush('DocError')">
            错误码参照
          </li>
          <li @click="routerPush('DocExample')">
            示例代码
          </li>
        </ul>
      </div>
    </el-header>
    <el-main class="main-container">
      <router-view />
    </el-main>
    <el-footer
      id="about"
      class="footer-container"
      height="auto"
    >
      <div style="display: flex; align-items: flex-start; justify-content: space-between; padding: 50px 200px 10px;">
        <div style="width: 430px">
          <div class="footer-title">
            关于 UomgAPI
          </div>
          <div class="footer-top-left">
            UomgAPI 是 优启梦 支持并维护的 API
            接口项目，致力于为用户提供稳定、快速的免费 API 接口服务平台。
          </div>
          <div class="footer-top-left">
            自2018年08月26日上线以来已经提供数 1,831,505 次 API 接口服务。
          </div>
          <div class="footer-top-left">
            反馈或建议请发送邮件至：lw@aeink.com
          </div>
        </div>
        <div style="width: 250px">
          <div class="footer-title">
            友情链接
          </div>
          <div>
            <el-link :underline="false">
              优启梦防洪
            </el-link>
            <el-link
              :underline="false"
              style="margin-left: 0.5rem"
            >
              AE博客
            </el-link>
            <el-link
              :underline="false"
              style="margin-left: 0.5rem"
            >
              三合一收款码
            </el-link>
            <el-link :underline="false">
              微信域名检测
            </el-link>
          </div>
        </div>
        <div style="width: 160px">
          <div class="footer-title">
            友情链接
          </div>
          <a
            href="https://console.upyun.com/register/?invite=ByTbEMrV-"
            style="border-bottom: none"
            target="_blank"
            onclick="_hmt.push(['_trackEvent', 'footer', 'click', 'footer-upyun'])"
            rel="nofollow"
          >
            <img
              src="@/assets/images/upyun.svg"
              alt="又拍云"
              style="width: 145px"
            >
          </a>
          <a
            href="https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=0g485asj"
            style="border-bottom: none"
            target="_blank"
            onclick="_hmt.push(['_trackEvent', 'footer', 'click', 'footer-aliyun'])"
            rel="nofollow"
          >
            <img
              src="@/assets/images/aliyun.svg"
              alt="阿里云"
              style="width: 145px"
            >
          </a>
        </div>
        <div style="width: 160px">
          <div class="footer-title">
            赞助我们
          </div>
          <img
            src="@/assets/images/aknife.png"
            alt=""
            style="width: 145px"
          >
        </div>
      </div>
      <div
        style="
          text-align: center;
          background-color: rgba(51, 51, 51, 0.08);
          padding: 1rem 0;
        "
      >
        © 2013-2018京ICP备15042860号
      </div>
    </el-footer>
    <!-- <el-backtop></el-backtop> -->
  </el-container>
</template>

<script>
// import DocApi from './components/doc-api.vue'

export default {
  name: 'DocGet',
  // components: {
  //   DocApi
  // },
  data () {
    return {
      activeName: 'second',
      tableTop: [
        {
          name: 'qq',
          Mandatory: '是',
          types: 'string',
          illustrate: 'qq账号'
        },
        {
          name: 'skey',
          Mandatory: '是',
          types: 'string',
          illustrate: 'skey'
        },
        {
          name: 'skey',
          Mandatory: '是',
          types: 'string',
          illustrate: 'skey'
        }
      ]
    }
  },
  methods: {
    // handleClick (tab, event) {
    //   console.log(tab, event)
    // },
    // 路由跳转方法：只有当传过来的name与当前页面this.$route.name不一样时才会出现跳转页面
    routerPush (name) {
      // console.log(this.$route)
      if (name !== this.$route.name) {
        this.$router.push({ name: name })
      }
    }
  }
}
</script>

<style lang="scss">
.site-header {
  position: relative;
  text-align: center;
  color: #fff;
  padding: 0;
}
.header-top {
  background-image: url(@/assets/images/background.svg);
  padding-left: 200px;
  padding-right: 200px;
  padding-block: 2rem;
}
.bs-navbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2rem;
  padding-block: 1rem;
}
.el-link.el-link--default {
  color: #fff;
  &:hover {
    color: #fff;
  }
}
.site-header h1 {
  font-size: 56px;
  text-shadow: -5px 5px 0 rgba(0, 0, 0, 0.1);
  font-weight: 500;
  margin: 1rem 0 -1rem;
}
.site-header p {
  padding-bottom: 2.5rem;
  font-size: 21px;
  font-weight: 200;
}
.package-info {
  color: #777;
  padding: 15px;
  background: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  padding: 0;
}
.package-info ul {
  display: flex;
  justify-content: center;
}
.package-info li {
  list-style-type: none;
  margin-right: 2rem;
  font-size: 14px;
  color: #2cc36b;
}
// footer部分
.footer-container {
  background-color: #27ae60;
  color: #fff;
  // padding: 0 200px;
}
</style>
